<template>
	<div class="flexcenter positionr">
		<div class="max_width padding15 flexbetween align_start">
			<div class="radius" style="width: 75%; background-color: rgba(0, 0, 0, 0);">
				<!-- 标题 -->
				<div class="mainpadding line_bottom">
					<div class="text_i color_three textcenter">{{dataAll.name}}</div>
					<div class="flexcenter margin_top2">
						<div class="text_d color_six margin_right5">考试题数：{{timu_list.length}}道</div>
						<div class="text_d color_six margin_right5">考试时间：{{dataAll.duration}}分钟</div>
						<div class="text_d color_six">试卷满分：{{dataAll.total_score}}分</div>
					</div>
				</div>
				<div class="mainpadding" v-for="(item,index) in timu_list" :id="'swiper'+item.id" :key="item.id"
					v-show="index===swipercurrent">
					<div class="typeBox" v-if="item.type_text">{{item.type_text}}</div>
					<div class="margin_top2 text_h">
						<span class="color_zero">{{index+1}}. {{item.name}}</span>
						<span class="color_nine">（{{item.score}}分）</span>
					</div>
					<div class="margin_top1" v-if="item.audio_text">
						<audio controls :src="item.audio_text"></audio>
					</div>
					<div class="margin_top1" v-if="item.image_text">
						<img :src="item.image_text" alt=""
							@click="dialogVisibleimg=true;dialogImageUrl=item.image_text;"
							style="width: 500px;height: 250px;">
					</div>
					<div v-if="item.type==0">
						<div v-for="(ite,inde) in item.children" :key="ite.id">
							<div class="margin_top2 text_h">
								<span class="color_zero">{{ite.name}}</span>
								<span class="color_nine">（{{ite.score}}分）</span>
								<span class="typeBox" style="display: inline-block;">{{ite.type_text}}</span>
							</div>
							<!-- 单选题 -->
							<div v-if="ite.type==1">
								<div :class="(ite.dxtvalue==ite.answer_content && it.key==ite.answer_content)?'selectTrue':ite.dxtvalue==it.key?'selectFalse':'noSelect'"
									v-for="it in ite.content_json" :key="it.key">
									<div class="text_ht margin_right2">{{it.key}}</div>
									<div>{{it.value}}</div>
								</div>
							</div>
							<!-- 多选题 -->
							<div v-if="ite.type==2">
								<div :class="it.daan==2?'selectFalse':it.daan==1?'selectTrue':'noSelect'" v-for="it in ite.content_json"
									:key="it.key">
									<div class="text_ht margin_right2">{{it.key}}</div>
									<div>{{it.value}}</div>
								</div>
							</div>
							<!-- 判断题 -->
							<div v-if="ite.type==3">
								<div :class="ite.pdtvalue==ite.answer_content && it.key==ite.answer_content?'selectTrue':ite.pdtvalue==it.key?'selectFalse':'noSelect'"
									v-for="it in ite.content_json" :key="it.key">
									<div class="text_ht margin_right2">{{it.key}}</div>
									<div>{{it.value}}</div>
								</div>
							</div>
							<!-- 连线题 -->
							<div class="flexbetween" v-if="ite.type==4">
								<canvas :id="'drawCanvas'+ite.id" :width="contentwidth+'px'" :height="swiperHeight+'px'"
									style="position: absolute;left: 0;top: 0;z-index: -1;"></canvas>
								<div class="left">
									<div class="lineNo" :id="'left'+index+inde+xb" v-for="(it,xb) in ite.left"
										:key="xb">
										{{it.name}}
									</div>
								</div>
								<div class="right">
									<div class="lineNo" :id="'right'+index+inde+xb" v-for="(it,xb) in ite.right"
										:key="xb">
										{{it.name}}
									</div>
								</div>
							</div>
							<!-- 填空题 -->
							<div v-if="ite.type==5">
								<div :class="it.daan==0?'selectFalse':'selectTrue'" v-for="it in ite.zqda" :key="it.key">
									<div class="text_ht margin_right2">{{it.key}}</div>
									<div class="flex1">
										<input style="width: 100%;" disabled type="text" placeholder="请输入答案"
											v-model="it.tktvalue">
									</div>
								</div>
							</div>
							<!-- 简答题 -->
							<div v-if="ite.type==6">
								<div class="margin_top2" style="width: 70%;">
									<el-input type="textarea" disabled :autosize="{ minRows: 4}" resize="none"
										placeholder="请输入答案" v-model="ite.jdtvalue">
									</el-input>
								</div>
							</div>
							<!-- 选择题解析 -->
							<div v-if="ite.type==1 || ite.type==2 || ite.type==3">
								<div class="text_f margin_top2">
									<span class="color_three">正确答案：</span>
									<span class="color_theme">{{ite.answer_content}}</span>
								</div>
								<div class="text_f margin_top2">
									<span class="color_three">你的答案：</span>
									<span class="color_red">{{ite.answer.answer_content || ""}}</span>
								</div>
							</div>
							<div v-if="ite.type==4">
								<div class="text_f margin_top2">
									<p class="color_three">正确答案：</p>
									<p class="color_theme" v-for="(it,ind) in ite.answer_content_json" :key="it">{{ite.left[it.left].name}}---{{ite.right[it.right].name}}</p>
								</div>
								<div class="text_f margin_top2">
									<p class="color_three">你的答案：</p>
									<p class="color_red" v-for="(it,ind) in ite.answer.answer_content_json" :key="it">{{ite.left[it.left].name}}---{{ite.right[it.right].name}}</p>
								</div>
							</div>
							<div v-if="ite.type==5">
								<div class="text_f margin_top2">
									<p class="color_three">正确答案：</p>
									<p class="color_theme"v-for="(it,ind) in ite.answer_content_json" :key="ind">{{it.key}}：{{it.value}}</p>
								</div>
							</div>
						</div>
					</div>
					<!-- 单选题 -->
					<div v-if="item.type==1">
						<div :class="item.dxtvalue==item.answer_content && ite.key==item.answer_content?'selectTrue':item.dxtvalue==ite.key?'selectFalse':'noSelect'"
							v-for="ite in item.content_json" :key="ite.key">
							<div class="text_ht margin_right2">{{ite.key}}</div>
							<div>{{ite.value}}</div>
						</div>
					</div>
					<!-- 多选题 -->
					<div v-if="item.type==2">
						<div :class="ite.daan==2?'selectFalse':ite.daan==1?'selectTrue':'noSelect'"
							v-for="ite in item.content_json" :key="ite.key">
							<div class="text_ht margin_right2">{{ite.key}}</div>
							<div>{{ite.value}}</div>
						</div>
					</div>
					<!-- 判断题 -->
					<div v-if="item.type==3">
						<div :class="item.pdtvalue==item.answer_content && ite.key==item.answer_content?'selectTrue':item.pdtvalue==ite.key?'selectFalse':'noSelect'"
							v-for="ite in item.content_json" :key="ite.key">
							<div class="text_ht margin_right2">{{ite.key}}</div>
							<div>{{ite.value}}</div>
						</div>
					</div>
					<!-- 连线题 -->
					<div class="flexbetween" v-if="item.type==4">
						<canvas :id="'drawCanvas'+item.id" :width="contentwidth+'px'" :height="swiperHeight+'px'"
							style="position: absolute;left: 0;top: 0;z-index: -1;"></canvas>
						<div class="left">
							<div class="lineNo" :id="'left'+index+ind" v-for="(ite,ind) in item.left" :key="ind">
								{{ite.name}}
							</div>
						</div>
						<div class="right">
							<div class="lineNo" :id="'right'+index+ind" v-for="(ite,ind) in item.right" :key="ind">
								{{ite.name}}
							</div>
						</div>
					</div>
					<!-- 填空题 -->
					<div v-if="item.type==5">
						<div :class="ite.daan==0?'selectFalse':'selectTrue'" v-for="ite in item.zqda"
							:key="ite.key">
							<div class="text_ht margin_right2">{{ite.key}}</div>
							<div class="flex1">
								<input style="width: 100%;" disabled type="text" placeholder="请输入答案"
									v-model="ite.tktvalue">
							</div>
						</div>
					</div>
					<!-- 简答题 -->
					<div v-if="item.type==6">
						<div class="margin_top2" style="width: 70%;">
							<el-input type="textarea" disabled :autosize="{ minRows: 4}" resize="none"
								placeholder="请输入答案" v-model="item.jdtvalue">
							</el-input>
						</div>
					</div>
					<!-- 选择题解析 -->
					<div v-if="item.type==1 || item.type==2 || item.type==3">
						<div class="text_f margin_top2">
							<span class="color_three">正确答案：</span>
							<span class="color_theme">{{item.answer_content}}</span>
						</div>
						<div class="text_f margin_top2">
							<span class="color_three">你的答案：</span>
							<span class="color_red">{{item.answer.answer_content || ""}}</span>
						</div>
					</div>
					<div v-if="item.type==4">
						<div class="text_f margin_top2">
							<p class="color_three">正确答案：</p>
							<p class="color_theme" v-for="(ite,ind) in item.answer_content_json" :key="ind">{{item.left[ite.left].name}}---{{item.right[ite.right].name}}</p>
						</div>
						<div class="text_f margin_top2">
							<p class="color_three">你的答案：</p>
							<p class="color_red" v-for="(ite,ind) in item.answer.answer_content_json" :key="ind">{{item.left[ite.left].name}}---{{item.right[ite.right].name}}</p>
						</div>
					</div>
					<div v-if="item.type==5">
						<div class="text_f margin_top2">
							<p class="color_three">正确答案：</p>
							<p class="color_theme"v-for="(ite,ind) in item.answer_content_json" :key="ind">{{ite.key}}：{{ite.value}}</p>
						</div>
					</div>
					<div class="flex margin_top2"  v-if="item.type && item.analysis_content">
						<div class="text_f color_three white_nowrap">答案解析：</div>
						<div>
							<div class="text_d color_zero" v-html="item.analysis_content"></div>
						</div>
					</div>
				</div>
				<div class="flexleft mainpadding">
					<!-- 我的错题显示移除 -->
					<!-- <div class="removeBox margin_right3">移除</div> -->
					<div class="themeBtnbrSmall margin_right3" @click="upswiper()">上一题</div>
					<div class="themeBtnbr" @click="downswiper()" v-if="swipercurrent!=timu_list.length-1">下一题</div>
				</div>
				<canvas id="myCanvas" width="400px" height="300px" style="position: absolute;"></canvas>
			</div>
			<!-- 答题卡 -->
			<div style="width: 23%;">
				<div class="mainpadding15 ffffff radius flexcenter">
					<i class="el-icon-alarm-clock" style="color: #3478F5;font-size: 32px;"></i>
					<div class="text_a color_theme margin_left1">已提交</div>
				</div>
				<div class="mainpadding15 ffffff radius margin_top1">
					<div class="text_dt color_zero">答题卡</div>
					<div class="flexleft flex_wrap">
						<div class="flexcenter itemBox" v-for="(item,index) in timu_list.length"
							@click="dtkswiper(index)">
							<div class="answerNowSelect pointer">{{item}}</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<el-dialog :visible.sync="dialogVisibleimg">
			<img width="100%" :src="dialogImageUrl" alt="">
		</el-dialog>
	</div>
</template>

<script>
	import {
		problemdata,
		examination_answer,
		update_duration,
		start_show,
		submit_examination
	} from "@/API/examination"
	export default {
		data() {
			return {
				education_lesson_id: "",
				student_examination_id: "",
				duration: "",
				timu_list: [],
				swipercurrent: 0,
				dialogVisibleimg: false,
				dialogImageUrl: "",
				scrolltop: 0,
				contentwidth: window.innerWidth, //界面宽度
				flag: true,
				swiperHeight: 0, //当前题目高度
				dataAll: {},
				is_choose_teacher: "1",
				teacher_id: "",
			}
		},
		created() {
			let data = this.$route.query
			this.education_lesson_id = data.education_lesson_id
			this.student_examination_id = data.student_examination_id
			this.duration = data.duration
		},
		mounted() {
			window.addEventListener("scroll", this.scrolling);
			window.addEventListener("resize", this.handelresize);
			this.init()
			this.gettimumsg()
		},
		watch: {
			timu_list() {
				let _this = this;
				if (_this.flag == true) {
					_this.flag = false
					_this.$nextTick(() => {
						_this.timu_list.forEach((item, index) => {
							if (item.type == 4 && index == 0) {
								if (item.answer) {
									let answer_content = JSON.parse(item.answer.answer_content)
									answer_content.forEach((ans, ansind) => {
										let idname1 = "left" + index + ans.left
										let idname2 = "right" + index + ans.right
										let data = {
											leftid: ans.left + 'left',
											leftitem: item.left[ans.left],
											leftmsg: {
												x: 0,
												y: 0
											},
											rightid: ans.right + 'right',
											rightitem: item.right[ans.right],
											rightmsg: {
												x: 0,
												y: 0
											}
										}
										console.log(idname2, 99999);
										let res2 = document.getElementById(idname2)
											.getBoundingClientRect();
										console.log(res2, "》》》》》》");
										data.rightmsg.x = res2.right -
											res2.width
										data.rightmsg.y = res2.top + (res2.height / 2) - 82
										let res1 = document.getElementById(idname1)
											.getBoundingClientRect();
										data.leftmsg.x = res1.left
										data.leftmsg.y = res1.top + (res1.height / 2) - 82
										item.lxarr.push(data)
									})
									this.getswiperHeight()
									this.lxFnshow(index)
								}
							}
							if (item.type == 0 && index == 0) {
								item.children.forEach((ite, ind) => {
									if (ite.answer && ite.type == 4) {
										let answer_content = JSON.parse(ite.answer.answer_content)
										answer_content.forEach((ans, ansind) => {
											let idname1 = "left" + index + ind + ans.left
											let idname2 = "right" + index + ind + ans.right
											let data = {
												leftid: ans.left + 'left',
												leftitem: ite.left[ans.left],
												leftmsg: {
													x: 0,
													y: 0
												},
												rightid: ans.right + 'right',
												rightitem: ite.right[ans.right],
												rightmsg: {
													x: 0,
													y: 0
												}
											}
											let res2 = document.getElementById(idname2)
												.getBoundingClientRect();
											data.rightmsg.x = res2.right -
												res2.width
											data.rightmsg.y = res2.top + (res2.height /
												2) - 82
											let res1 = document.getElementById(idname1)
												.getBoundingClientRect();
											data.leftmsg.x = res1.left
											data.leftmsg.y = res1.top + (res1.height / 2) -
												82
											ite.lxarr.push(data)
										})
										this.getswiperHeight()
										this.lxFnsmallshow(index, ind)
									}
								})
							}
						})
					})
				}
			}
		},
		methods: {
			gettimumsg() {
				start_show({
					education_lesson_id: this.education_lesson_id,
					student_examination_id: this.student_examination_id
				}).then(res => {
					this.dataAll = res.data.data
				})
			},
			upswiper() { //上一题
				if(this.swipercurrent==0){
					return false
				}
				this.swipercurrent = this.swipercurrent - 1
				this.getswiperHeight()
				setTimeout(() => {
					this.huaxian()
				}, 100)
			},
			downswiper() { //下一题
				this.swipercurrent = this.swipercurrent + 1
				this.getswiperHeight()
				setTimeout(() => {
					this.huaxian()
				}, 100)
			},
			dtkswiper(index) { //轮播图切换
				this.swipercurrent = index
				this.getswiperHeight()
				setTimeout(() => {
					this.huaxian()
				}, 100)
			},
			huaxian() {
				let _this = this
				if (this.timu_list[this.swipercurrent].type == 4) {
					if (_this.timu_list[this.swipercurrent].answer) {
						let item = _this.timu_list[this.swipercurrent]
						if (item.lxarr.length == 0) {
							let answer_content = JSON.parse(item.answer.answer_content)
							console.log(answer_content, 1213);
							answer_content.forEach((ans, ansind) => {
								let idname1 = "left" + this.swipercurrent + ans.left
								let idname2 = "right" + this.swipercurrent + ans.right
								let data = {
									leftid: ans.left + 'left',
									leftitem: item.left[ans.left],
									leftmsg: {
										x: 0,
										y: 0
									},
									rightid: ans.right + 'right',
									rightitem: item.right[ans.right],
									rightmsg: {
										x: 0,
										y: 0
									}
								}
								console.log(idname2, 99999);
								let res2 = document.getElementById(idname2)
									.getBoundingClientRect();
								console.log(res2, "》》》》》》");
								data.rightmsg.x = res2.right -
									res2.width
								data.rightmsg.y = res2.top + (res2.height / 2) - 82 + this.scrolltop
								let res1 = document.getElementById(idname1)
									.getBoundingClientRect();
								data.leftmsg.x = res1.left
								data.leftmsg.y = res1.top + (res1.height / 2) - 82 + this.scrolltop
								item.lxarr.push(data)
							})
						}
						this.getswiperHeight()
						this.lxFnshow(this.swipercurrent)
					}
				}
				if (this.timu_list[this.swipercurrent].type == 0) {
					let item = _this.timu_list[this.swipercurrent]
					item.children.forEach((ite, ind) => {
						if (ite.answer && ite.type == 4) {
							let answer_content = JSON.parse(ite.answer.answer_content)
							answer_content.forEach((ans, ansind) => {
								let idname1 = "left" + this.swipercurrent + ind + ans.left
								let idname2 = "right" + this.swipercurrent + ind + ans.right
								let data = {
									leftid: ans.left + 'left',
									leftitem: ite.left[ans.left],
									leftmsg: {
										x: 0,
										y: 0
									},
									rightid: ans.right + 'right',
									rightitem: ite.right[ans.right],
									rightmsg: {
										x: 0,
										y: 0
									}
								}
								let res2 = document.getElementById(idname2)
									.getBoundingClientRect();
								data.rightmsg.x = res2.right -
									res2.width
								data.rightmsg.y = res2.top + (res2.height / 2) - 82 + this.scrolltop
								let res1 = document.getElementById(idname1)
									.getBoundingClientRect();
								data.leftmsg.x = res1.left
								data.leftmsg.y = res1.top + (res1.height / 2) - 82 + this.scrolltop
								ite.lxarr.push(data)
							})
							this.getswiperHeight()
							this.lxFnsmallshow(this.swipercurrent, ind)
						}
					})
				}
			},
			getswiperHeight() {
				let idname3 = "swiper" + this.timu_list[this.swipercurrent].id
				setTimeout(() => {
					let res3 = document.getElementById(idname3).getBoundingClientRect();
					this.swiperHeight = res3.height + 227 //227为下划线上面的高度
				}, 50)
			},
			changedxtvalue(val1, val2) { //单选题处理
				val1.dxtvalue = val2.key;
			},
			changepdtvalue(val1, val2) { //判断题处理
				val1.pdtvalue = val2.key;
			},
			dxtclick(ite) { //多选题处理
				ite.is_check = ite.is_check ? false : true;
			},
			init() {
				problemdata({
					education_lesson_id: this.education_lesson_id,
					student_examination_id: this.student_examination_id
				}).then(res => {
					//0,3听写题， 0,2情景选择题，1单选题，2多选题，3判断题，4连线题，5填空题，6简答题
					let arr = this.student_examination_id ? res.data.data : res.data.data.data
					arr.forEach((item, index) => {
						if (item.type == 6) {
							let jdtvalue = item.answer ? item.answer.answer_content : ""
							this.$set(item, "jdtvalue", jdtvalue)
						} else if (item.type == 1) { //单选题
							let dxtvalue = item.answer ? item.answer.answer_content : ""
							this.$set(item, "dxtvalue", dxtvalue)
						} else if (item.type == 2) { //多选题
							let cwda = item.answer ? item.answer.answer_content.split(" ") : [];
							let zqda = item.answer_content.split(" ")
							item.content_json.forEach(ite => {
								this.$set(ite, "daan", 0)
								cwda.forEach(cw => {
									if (ite.key == cw) {
										ite.daan = 2
									}
								})
								zqda.forEach(zq => {
									if (ite.key == zq) {
										ite.daan = 1
									}
								})
							})
						} else if (item.type == 3) { //判断题
							let pdtvalue = item.answer ? item.answer.answer_content : ""
							this.$set(item, "pdtvalue", pdtvalue)
						} else if (item.type == 4) { //连线题
							let left = []
							let right = []
							item.content_json.forEach((ite, ind) => {
								left.push({
									id: ind, //id拿下标这样后边提交方便处理
									name: ite.left_value,
									ischeck: false, //连线题的ischeck跟多选区分开这样好查找
								})
								right.push({
									id: ind, //id拿下标这样后边提交方便处理
									name: ite.right_value,
									ischeck: false, //连线题的ischeck跟多选区分开这样好查找
								})
							})
							this.$set(item, "left", left);
							this.$set(item, "right", right);
							this.$set(item, "lxarr", []);

						} else if (item.type == 5) { //填空题
							let cwda = item.answer ? JSON.parse(item.answer.answer_content) : [];
							let zqda = JSON.parse(item.answer_content)
							zqda.forEach(zq => {
								this.$set(zq, "daan", 0)
								this.$set(zq, "tktvalue", "")
								cwda.forEach(cw => {
									if (zq.value == cw.value) {
										zq.daan = 1
									}
									if (zq.key == cw.key) {
										zq.tktvalue = cw.value
									}
								})
							})
							this.$set(item, "zqda", zqda)
						} else if (item.type == 0) {
							item.children.forEach(ite => {
								if (ite.type == 6) {
									let jdtvalue = ite.answer ? ite.answer.answer_content : ""
									this.$set(ite, "jdtvalue", jdtvalue)
								} else if (ite.type == 1) { //单选题
									let dxtvalue = ite.answer ? ite.answer.answer_content : ""
									this.$set(ite, "dxtvalue", dxtvalue)
								} else if (ite.type == 2) { //多选题
									let cwda = ite.answer ? ite.answer.answer_content.split(" ") :
										[];
									let zqda = ite.answer_content.split(" ")
									ite.content_json.forEach(it => {
										this.$set(it, "daan", 0)
										cwda.forEach(cw => {
											if (it.key == cw) {
												it.daan = 2
											}
										})
										zqda.forEach(zq => {
											if (it.key == zq) {
												it.daan = 1
											}
										})
									})
								} else if (ite.type == 3) { //判断题
									let pdtvalue = ite.answer ? ite.answer.answer_content : ""
									this.$set(ite, "pdtvalue", pdtvalue)
								} else if (ite.type == 4) { //连线题
									let left = []
									let right = []
									ite.content_json.forEach((it, ind) => {
										left.push({
											id: ind, //id拿下标这样后边提交方便处理
											name: it.left_value,
											ischeck: false, //连线题的ischeck跟多选区分开这样好查找
										})
										right.push({
											id: ind, //id拿下标这样后边提交方便处理
											name: it.right_value,
											ischeck: false, //连线题的ischeck跟多选区分开这样好查找
										})
									})
									this.$set(ite, "left", left);
									this.$set(ite, "right", right);
									this.$set(ite, "lxarr", []);
								} else if (ite.type == 5) { //填空题
									let cwda = ite.answer ? JSON.parse(ite.answer
										.answer_content) : [];
									let zqda = JSON.parse(ite.answer_content)
									zqda.forEach(zq => {
										this.$set(zq, "daan", 0)
										this.$set(zq, "tktvalue", "")
										cwda.forEach(cw => {
											if (zq.value == cw.value) {
												zq.daan = 1
											}
											if (zq.key == cw.key) {
												zq.tktvalue = cw.value
											}
										})
									})
									this.$set(ite, "zqda", zqda)
								}
							})
						}
					})
					this.timu_list = arr
					if (!this.student_examination_id) {
						this.student_examination_id = res.data.student_examination_id
					}
				})
			},

			lineleft(e, current, val) {
				let res1 = document.getElementById(e.target.id).getBoundingClientRect();
				console.log(res1, "惊雷");
				let x = res1.left
				let y = res1.top + (res1.height / 2) + Number(this.scrolltop) - 82
				// console.log(y,"9999");
				// 将默认上一次选中的左边的列表数据删除
				if (current.lxarr.length && !current.lxarr[current.lxarr.length - 1].rightid) {
					current.lxarr.pop()
				}
				// 如果已经存在连线需要将当前连线数据删除
				if (current.lxarr.length) {
					current.lxarr.forEach((item, index) => {
						if (item.leftid == val.id + "left") {
							// console.log(item, "当前选中内容");
							current.lxarr.splice(index, 1)
						}
					})
					this.lxFn(current)
				}
				current.lxarr.push({
					leftmsg: {
						x: x,
						y: y
					},
					leftitem: val,
					leftid: val.id + "left"
				})
			},
			lineright(e, current, val) {
				let res1 = document.getElementById(e.target.id).getBoundingClientRect();
				let x = res1.left
				let y = res1.top + (res1.height / 2) + Number(this.scrolltop) - 82
				current.lxarr[current.lxarr.length - 1] = {
					leftmsg: current.lxarr[current.lxarr.length - 1].leftmsg,
					leftitem: current.lxarr[current.lxarr.length - 1].leftitem,
					leftid: current.lxarr[current.lxarr.length - 1].leftid,
					rightmsg: {
						x: x,
						y: y
					},
					rightitem: val,
					rightid: val.id + "right"
				}
				this.lxFn(current)
			},
			lxFn(current) {
				let canvas = document.getElementById('drawCanvas' + current.id);
				let ctx = canvas.getContext("2d");
				ctx.clearRect(0, 0, this.contentwidth, this.swiperHeight);
				ctx.beginPath()
				console.log(current.lxarr, "退退退2");
				// ctx.moveTo(20, 20)
				// ctx.lineTo(40, 20)
				current.lxarr.forEach(item => {
					ctx.moveTo(item.leftmsg.x, item.leftmsg.y)
					ctx.lineTo(item.rightmsg.x, item.rightmsg.y)
					ctx.strokeStyle = "#3478f5"
					ctx.stroke();
					ctx.closePath();
				})
			},
			lxFnshow(current) {
				setTimeout(() => {
					let canvas = document.getElementById('drawCanvas' + this.timu_list[current].id);
					let ctx = canvas.getContext("2d");
					let lxarr = this.timu_list[current].lxarr
					console.log(lxarr, "嗨嗨嗨");
					// ctx.clearRect(0, 0, this.contentwidth, this.swiperHeight);
					ctx.beginPath()
					lxarr.forEach((item, index) => {
						console.log(item.leftmsg.x, item.leftmsg.y, "嗨嗨嗨222");
						console.log(item.rightmsg.x, item.rightmsg.y, "嗨嗨嗨222");
						ctx.moveTo(item.leftmsg.x, item.leftmsg.y)
						ctx.lineTo(item.rightmsg.x, item.rightmsg.y)
						ctx.strokeStyle = "#3478f5"
						ctx.stroke();
						ctx.closePath();
					})
				}, 100)

			},
			lxFnsmallshow(current, ind) {
				setTimeout(() => {
					let canvas = document.getElementById('drawCanvas' + this.timu_list[current].children[ind].id);
					let ctx = canvas.getContext("2d");
					let lxarr = this.timu_list[current].children[ind].lxarr
					console.log(lxarr, 9999);
					ctx.clearRect(0, 0, this.contentwidth, this.swiperHeight);
					ctx.beginPath()
					lxarr.forEach((item, index) => {
						ctx.moveTo(item.leftmsg.x, item.leftmsg.y)
						ctx.lineTo(item.rightmsg.x, item.rightmsg.y)
						ctx.strokeStyle = "#3478f5"
						ctx.stroke();
						ctx.closePath();
					})
				}, 100)
			},
			handleClose(done) {
				done();
			},
			handelresize() { //监听窗口缩放大小
				const t = window.devicePixelRatio
				document.body.style.zoom = 1 / t
				// this.contentwidth = window.innerWidth
			},
			scrolling() {
				// 滚动条距文档顶部的距离
				let scrollTop =
					window.pageYOffset ||
					document.documentElement.scrollTop ||
					document.body.scrollTop;
				// 滚动条滚动的距离
				let scrollStep = scrollTop - this.scrolltop;
				// 更新——滚动前，滚动条距文档顶部的距离
				this.scrolltop = scrollTop;
			},

		}
	}
</script>

<style lang="scss" scoped>
	/* #drawCanvas{
		
	} */
	/* 题目类型 */
	.typeBox {
		width: 54px;
		height: 25px;
		text-align: center;
		line-height: 25px;
		background: rgba(52, 120, 245, .1);
		border-radius: 4px 4px 4px 4px;
		font-size: 12px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #3478F5;
	}

	/* 选中且正确 */
	.selectTrue {
		width: 70%;
		padding: 15px;
		background: rgba(52, 120, 245, 0.1);
		border-radius: 7px 7px 7px 7px;
		border: 1px solid #3478F5;
		font-size: 14px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #3478F5 !important;
		display: flex;
		align-items: center;
		margin-top: 20px;
		position: relative;
	}

	.selectTrue::after {
		content: "";
		width: 30px;
		height: 18px;
		background-image: url("../../static/image/test/trueImg.png");
		background-size: 100% 100%;
		position: absolute;
		right: -1px;
		top: -1px;
	}

	/* 选中但正确 */
	.selectFalse {
		width: 70%;
		padding: 15px;
		background: #FFEBEB;
		border-radius: 7px 7px 7px 7px;
		opacity: 1;
		border: 1px solid #F43D38;
		font-size: 14px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #F43D38 !important;
		display: flex;
		align-items: center;
		margin-top: 20px;
		position: relative;
		cursor: pointer;
	}

	.selectFalse::after {
		content: "";
		width: 30px;
		height: 18px;
		background-image: url("../../static/image/test/falseImg.png");
		background-size: 100% 100%;
		position: absolute;
		right: -1px;
		top: -1px;
	}

	/* 选中 */
	.selected {
		width: 70%;
		padding: 15px;
		background: rgba(52, 120, 245, 0.1);
		border-radius: 7px 7px 7px 7px;
		border: 1px solid #3478F5;
		font-size: 14px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #3478F5 !important;
		display: flex;
		align-items: center;
		margin-top: 20px;
		cursor: pointer;
		position: relative;
	}

	/* 未选中 */
	.noSelect {
		width: 70%;
		padding: 15px;
		border-radius: 7px 7px 7px 7px;
		border: 1px solid #E2DEDE;
		font-size: 14px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
		display: flex;
		align-items: center;
		margin-top: 20px;
		cursor: pointer;
	}

	.noSelect div:nth-child(1) {
		color: #000000;
	}

	.itemBox {
		width: 20%;
		margin-top: 20px;
	}

	/* 答题卡-已答题 */
	.answerSelected {
		width: 31px;
		height: 31px;
		text-align: center;
		line-height: 31px;
		background: #8E8E8E;
		border-radius: 50%;
		font-size: 13px;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FFFFFF;
	}

	/* 答题卡-正在答题 */
	.answerNowSelect {
		width: 31px;
		height: 31px;
		text-align: center;
		line-height: 31px;
		background: #3478F5;
		border-radius: 50%;
		font-size: 13px;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FFFFFF;
	}

	/* 答题卡-还未答题 */
	.answerNoSelect {
		width: 31px;
		height: 31px;
		text-align: center;
		line-height: 31px;
		background: #F2F8F8;
		border-radius: 50%;
		font-size: 13px;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
	}

	::v-deep .el-dialog {
		border-radius: 7px;
	}

	.noTeacher {
		padding: 15px;
		background: rgba(255, 0, 0, .1);
		border-radius: 4px 4px 4px 4px;
	}

	.removeBox {
		padding: 10px 35px;
		background: rgba(255, 0, 0, 0.1);
		border-radius: 4px;
		border: 1px solid #FF0000;
		font-size: 12px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FF0000;
	}

	.lineTrue {
		padding: 15px 40px;
		background: rgba(52, 120, 245, 0.1);
		border-radius: 7px 7px 7px 7px;
		border: 1px solid #3478F5;
		font-size: 17px;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #3478F5;
		margin-top: 20px;
	}

	.lineFalse {
		padding: 15px 40px;
		background: #FFEBEB;
		border-radius: 7px 7px 7px 7px;
		border: 1px solid #F43D38;
		font-size: 17px;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #F43D38;
		margin-top: 20px;
	}

	.lineNo {
		cursor: pointer;
		padding: 15px 40px;
		border-radius: 7px 7px 7px 7px;
		border: 1px solid #E2DEDE;
		background-color: #f5f7fa;
		font-size: 17px;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
		margin-top: 20px;
	}
</style>